﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<title>搞笑首页</title>
		<link rel="stylesheet" href="css/cropper.min.css" />
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/adaptation.js"></script>
	</head>
	<body>
		<div id="wrap">
			<!--主画面-->
			<div class="page page-1">
				<div class="light"></div>
				<div class="slogan">
					<img src="img/slogan.png" alt="" />
					<div class="sd"></div>
					<a href="javascript:void(0);" class="ui-enter"></a>
				</div>
				<div class="txt-tip"></div>
			</div>
			
			<!--选择寝室类型-->
			<div class="page page-2">
				<div class="txt-title"></div>
				<div class="select-dorm">
					<img src="img/select-img.jpg" alt="" usemap="#picture"/>
					<map name="picture" id="picture">
						<area shape="poly" coords="0,0,534,0,534,217,0,276" href="javascript:void(0);">
						<area shape="poly" coords="0,276,534,217,534,575,0,472" href="javascript:void(0);">
						<area shape="poly" coords="0,472,534,575,534,819,0,819" href="javascript:void(0);">
					</map>
					<div class="items">
						<a href="javascript:void(0);" class="item-1" data-type="土炕"><span class="ui-selected"></span></a>
						<a href="javascript:void(0);" class="item-2" data-type="猪圈"><span class="ui-selected"></span></a>
						<a href="javascript:void(0);" class="item-3" data-type="别墅"><span class="ui-selected"></span></a>
					</div>
				</div>
				<a href="javascript:void(0);" class="ui-next"></a>
			</div>
			
			<!--创建寝室-->
			<div class="page page-3">
				<div class="txt-create"></div>
				<form action="#" id="createForm">
					<input type="hidden" name="dormtype" id="dormtype"/>
					<input type="hidden" name="upload_path" id="upload_path"/>
					<input type="hidden" name="upload_url" id="upload_url"/>
					<input type="hidden" name="img" id="cropperimg"/>
					<div class="item ui-select">
						<span>选择在读学校</span>
						<select name="school" id="school">
							<option value="">选择在读学校</option>
							<option value="工程学院">工程学院</option>
							<option value="宁波大学">宁波大学</option>
							<option value="诺丁汉">诺丁汉</option>
							<option value="万里学院">万里学院</option>
							<option value="大红鹰学院">大红鹰学院</option>
						</select>
					</div>
					<div class="item">
						<input type="text" placeholder="寝室昵称" name="dormname" id="dormname"/>
					</div>
					<div class="item">
						<input type="text" placeholder="一句话形容你的寝室（最多22个字）" name="desc" maxlength="22" id="desc"/>
					</div>
					<div class="item pr">
						<span>寝室属性</span>
						<label class="txt-male">
							<input type="radio" name="sex" value="0" class="ui-checked" checked/>
						</label>
						<label class="txt-female">
							<input type="radio" name="sex" value="1" class="ui-checked"/>
						</label>
					</div>
					<div class="upload-box">
						<div class="ui-camera-box upload">
							<p><i class="ui-camera"></i><br />请上传寝室封面</p>
							<div class="img-box">
								<img src="" alt="" id="resultimg"/>
							</div>
						</div>
						<a href="javascript:void(0);" class="ui-submit-0" id="submitForm"></a>
					</div>
				</form>
			</div>
		</div>
		
		<div style="display: none;">
			<!-- 照片裁剪框 -->
            <div id="cropperBox" class="angleBg">
                <div class="title">裁剪照片</div>
                <div class="container">
                    <img id="readyimg" src="" alt="" class="readyimg">
                </div>
                <a href="javascript:void(0);" class="sure"></a>
            </div>
		</div>
		
		<script src="js/jquery.min.js"></script>
		<script src="js/cropper.min.js"></script>
		<script src="js/layer/layer.js"></script>
		<script src="js/common.js"></script>
		<script>
			$(function(){
				$(".ui-enter").click(function(){
					$(".page-1").hide();
					$(".page-2").show();
				});
				
				$(".ui-next").click(function(){
					var selected = $(".items .cur").length;
					if(!selected){
						remind("请选择哪一个更像你的寝室");
						return;
					}
					$("#dormtype").val($(".items .cur").data("type"));
					
					$(".page-2").hide();
					$(".page-3").show();
				});
				
				$("#picture area").click(function(){
					var index = $(this).index()+1;
					var dom = $(".item-"+index);
					var isSelected = dom.hasClass("cur");
					if(isSelected){
						return;
					}
					dom.siblings().removeClass("cur");
					dom.addClass("cur");
				});
				
				$(".items a").click(function(){
					var isSelected = $(this).hasClass("cur");
					if(isSelected){
						return;
					}
					$(this).siblings().removeClass("cur");
					$(this).addClass("cur");
				});
				
				$("#school").change(function(){
					$(".ui-select span").text($('#school option:selected').text());
				});
				
				//提交
				$("#submitForm").click(function(){
					if($("#school").isEmpty()){
						remind("请选择在读学校");
						return;
					}
					if($("#dormname").isEmpty()){
						remind("请填写寝室昵称");
						return;
					}
					if($("#desc").isEmpty()){
						remind("请形容你的寝室");
						return;
					}
					if($("#upload_path").isEmpty()){
						remind("请上传寝室封面");
						return;
					}
					
					var values = $("#createForm").serialize();
					
					$.ajax({
						type: "post",
						data: {values: values},
						dataType: "json",
						url: "data/create.json",
						success: function(data){
							if(data.status){
								remind("提交成功进入我的寝室引导页");
								window.location.href = "mydorm.html";
							}
						}
					});
				});
				
				var cropper;
				
				var Upload = {
					init : function(){
						this.bindEvent();   //绑定事件
					},
					bindEvent: function(){
						var instance = this;
						$(".upload").click(function(){
							instance.uploadTest();
						});
						
						$(document).on('click','.sure',function(){
				            var result = $('.layermbox .container > img').cropper('getCroppedCanvas',{width:510,height:510,fillColor:'#FFF'}).toDataURL("image/jpeg");
				            $("#resultimg").attr('src',result);
				            $("#cropperimg").val(result.replace('data:image/jpeg;base64,', ''));
				            $(".img-box").show();
				            layer.closeAll();
				        });
					},
					uploadTest: function(){
						var instance = this;
						$.ajax({
			                type:"get",
			                traditional: true,
			                url:"data/upload.json",
			                dataType: "json",
			                data:{},
			                success: function(data){
			                    if(data.success==1) {
			                    	console.log(data.upload_path)
			                    	$("#upload_path").val(data.upload_path);
			                        instance.loadImage('readyimg', data.src, instance.loadResult);
			                    } else {
			                        remind(data.msg);
			                    }
			                },
			            }); 
					},
					upload: function(){
						var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i) ;
			            if(wechatInfo && wechatInfo[1] < "6.0") {
			                remind('微信版本不支持图片上传');
			                return;
			            }
			            wx.chooseImage({
			                sizeType: ['original'],
			                success: function (res) {
			                    var localIds = res.localIds;
			                    if(localIds.length>maxPicnum){
			                        remind('最多只能传1张照片');
			                        return;
			                    }
			                    
			                    var localId = localIds[0];
			                    
			                    wx.uploadImage({
			                        localId: localId,
			                        isShowProgressTips: 0,
			                        success: function(res) {
			                            var sid = res.serverId;
			                            $.ajax({
			                                type:"get",
			                                traditional: true,
			                                url:"{php echo $this->createMobileUrl('DownloadPic')}",
			                                dataType: "json",
			                                data:{sid:sid},
			                                success: function(data){
			                                    if(data.success==1) {
			                                        $("input[name=upload_url]").val(data.upload_url);
			                                        $("input[name=upload_path]").val(data.upload_path);
			                                        loadImage('readyimg', data.upload_url, loadResult);
			                                    } else {
			                                        remind(data.msg);
			                                    }      
			                                },
			                            }); 
			                        },
			                        fail: function (res) {
			                            remind('上传失败，请稍候再试~');
			                        }
			                    });
			                }
			            });
					},
					loadResult: function(data){
						data = data || {};
			            if (typeof (data.msg) != 'undefined') {
			                if(data.msg=='ok') {
			                    $("#readyimg").attr('src', data.src);
			                    if(cropper){
			                        $('.layermbox .container > img').cropper("reset")
			                    }
			
			                    layer.open({
			                        content: $("#cropperBox")[0].outerHTML,
			                        shadeClose: false,
			                        className: "cropBox",
			                        style: "background:none;min-width:600px;max-width:600px;height:800px;",
			                    });
			                    
			                    cropper = $('.layermbox .container > img').cropper({
			                        aspectRatio: 1/1,
			                        minCropBoxWidth: 570,
			                        minCropBoxHeight: 570,
			                        autoCropArea:1,
			                        guides:false,
			                        minContainerWidth:570,
			                        minContainerHeight:570,
			                        minCanvasWidth:510,
			                        minCanvasHeight:510,
			                        cropBoxResizable:false,
			                        toggleDragModeOnDblclick:false,
			                        // movable:false,
			                        rotatable:false,
			                        checkOrientation: true,
			                        crop: function(e) {
			                            //$("input[name='left']").val(e.x);
			                            //$("input[name='top']").val(e.y);
			                            //$("input[name='width']").val(e.width);
			                            //$("input[name='height']").val(e.height);
			                        }
			                    });
			                } else {
			                    remind('系统繁忙，请稍后再试！');
			                }
			            }
					},
					loadImage: function(id,src,callback){
						var imgloader = new window.Image();
				        // 当图片成功加载到浏览器缓存
				        imgloader.onload = function (evt) {
				            if (typeof (imgloader.readyState) == 'undefined') {
				                imgloader.readyState = 'undefined';
				            }
				            // 在IE8以及以下版本中需要判断readyState而不是complete
				            if ((imgloader.readyState == 'complete' || imgloader.readyState == "loaded") || imgloader.complete) {
				                callback({
				                    'msg': 'ok',
				                    'src': src,
				                    'id': id
				                });
				            } else {
				                imgloader.onreadystatechange(evt);
				            }
				        };
				        // 当加载出错或者图片不存在
				        imgloader.onerror = function (evt) {
				            callback({
				                'msg': 'error',
				                'id': id
				            });
				        }
				        // 当加载状态改变                       
				        imgloader.onreadystatechange = function (e) {
				            // 此方法只有IE8以及一下版本会调用     
				        }
				        imgloader.src = src;
					}
				}
				
				Upload.init();
			});
		</script>
	</body>
</html>